<!-- Admin首页 -->
<template>
    <div>
    <!-- 统计数据 -->
    <el-row :gutter="30">
      <el-col :span="6">
        <el-card>
          <div class="card-icon-container">
            <i class="iconfont el-icon-myfangwenliang" style="color:#40C9C6" />
          </div>
          <div class="card-desc">
            <div class="card-title">访问量</div>
            <div class="card-count">{{ parameter.totalView }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="card-icon-container">
            <i class="el-icon-s-comment" style="color:#36A3F7" />
          </div>
          <div class="card-desc">
            <div class="card-title">留言量</div>
            <div class="card-count">{{ parameter.totalComment }}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="card-icon-container">
            <i class="iconfont el-icon-myuser" style="color:#34BFA3" />
          </div>
          <div class="card-desc">
            <div class="card-title">用户量</div>
            <div class="card-count">{{ parameter.totalUser}}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card>
          <div class="card-icon-container">
            <i class="iconfont el-icon-mywenzhang-copy" style="color:#F4516C" />
          </div>
          <div class="card-desc">
            <div class="card-title">文章量</div>
            <div class="card-count">{{ parameter.totalArticle }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 一周访问量展示 -->
    <el-card style="margin-top:1.25rem">
      <div class="e-title">一周访问量</div>
      <!-- <div style="height:350px">
        <v-chart :options="viewCount" v-loading="loading" />
      </div> -->
      <div id="app" style="height:350px">
        <schart class="wrapper" canvasId="canvas" :options="options" />
      </div>
    </el-card>
    <el-row :gutter="30" style="margin-top:1.25rem">
      <!-- 文章浏览量排行 -->
      <el-col :span="16">
        <el-card>
          <div class="e-title">文章浏览量排行</div>
          <!-- <div style="height:350px">
            <v-chart :options="ariticleRank" v-loading="loading" />
          </div> -->
          <div id="app" style="height:350px;">
            <schart class="wrapper" canvasId="canvas2" :options="options2" />
          </div>
        </el-card>
      </el-col>
      <!-- 分类数据统计 -->
      <el-col :span="8">
        <el-card>
          <div class="e-title">文章分类统计</div>
          <!-- <div style="height:350px;">
            <v-chart :options="category" v-loading="loading" />
          </div> -->
          <div id="app" style="height:350px;">
            <schart class="wrapper" canvasId="canvas3" :options="options3" />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>

</template>
<script>
import { UserFilled } from '@element-plus/icons-vue'
import Schart from 'vue-schart';
import axios from 'axios';
import { ElMessage } from 'element-plus'

export default {
    name: 'wellcome',
    components:{
		Schart
	},
    //组件创建
    created() {
        this.init()
    },
    mounted(){
    },
    data() {
        return{
            parameter:{}, 
            options: {
                //里面是假数据
                type: "bar",
                title: {
                    text: "最近一周各品类销售图"
                },
                bgColor: "#fbfbfb",
                labels: ["周一", "周二", "周三", "周四", "周五"],
                datasets: [
                    {
                        label: "家电",
                        fillColor: "rgba(241, 49, 74, 0.5)",
                        data: [234, 278, 270, 190, 230]
                    },
                    {
                        label: "百货",
                        data: [164, 178, 190, 135, 160]
                    },
                    {
                        label: "食品",
                        data: [144, 198, 150, 235, 120]
                    }
                ]
            },
            options2:{

            },
            options3:{

            }
        }
    },
    methods:{
        init(){
            axios.get('http://localhost:8888/admin/parameter').then(data=>{
                if(data.data.data){
                    console.log(data.data.data);
                    this.parameter = data.data.data;
                }
            })
            axios.get('http://localhost:8888/admin/visition').then(data=>{
                if(data.data.data){
                    console.log(data.data.data);
                    this.options = data.data.data;
                }
            })
            axios.get('http://localhost:8888/admin/articleChart').then(data=>{
                if(data.data.data){
                    console.log(data.data.data);
                    this.options2 = data.data.data;
                }
            })
            axios.get('http://localhost:8888/admin/articleType').then(data=>{
                if(data.data.data){
                    console.log(data.data.data);
                    this.options3 = data.data.data;
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
.demo-type {
  display: flex;
//   flex-direction: row;
  align-items: center;
}
.demo-type > div {
  flex: 1;
  text-align: center;
}

.demo-type > div:not(:last-child) {
  border-right: 1px solid var(--el-border-color);
}

.main{
    display: flex;
}
.left{
    width: 35%;
}
.right{
    width: 45%;
}
.wrapper{
	width: 100%;
	height: 20rem;
}

.card-count{
    color: brown;
    font-size: 40px;
}
</style>